<script setup>
import MySelection from "@/components/MySelection/MySelection.vue";
import MyInput from "@/components/MyInput/MyInput.vue";
import { ref, onMounted } from "vue";
import api from "@/api";

const searchIpt = ref("");
const list = ref([]);
const dataInit = async () => {
  const { data } = await api.alarmTrend();
  list.value = data.records;
};
onMounted(() => {
  dataInit();
});
</script>

<template>
  <div class="jk-left">
    <MySelection />
    <MyInput v-model="searchIpt" placeholder="查询当前层级下的孪生体" />
    <div class="line"></div>
    <div class="body">
      <div class="item" v-for="item of list" :key="item?.id">
        <div class="point"></div>
        <div class="time">{{ item?.alarmTime }}</div>
        <div class="info-content">
          <div class="label">{{ item?.addressName }}</div>
          <div class="type">
            {{ { 1: "开关门告警", 2: "非法入侵", 3: "非工单时间进入" }[item?.alarmType] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.jk-left {
  width: 700px;
  height: 93%;
  background-image: url(/imgs/25.png);
  background-size: 100% 100%;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
  pointer-events: all;

  .slt-box {
    width: 100%;
    height: 45px;
    border: 1px solid #434d62;
    border-radius: 4px;
  }

  .line {
    width: 100%;
    height: 3px;
    background-image: linear-gradient(
      90deg,
      transparent,
      rgba(107, 162, 225, 0.37),
      transparent
    );
  }

  .body {
    flex: 1;
    min-height: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 10px;

    .item {
      width: 100%;
      position: relative;
      padding: 0 50px;
      padding-top: 40px;
      padding-bottom: 40px;

      .time {
        color: #fff;
        position: absolute;
        top: -10px;
        left: 30px;
      }

      .info-content {
        width: 90%;
        background-image: url(/imgs/20.png);
        background-size: 100% 100%;
        right: 0;
        padding: 20px;
        box-sizing: border-box;

        .label {
          color: #fff;
          margin-bottom: 30px;
        }

        .type {
          color: #e9a123;
        }
      }

      &::after {
        content: "";
        display: inline-block;
        position: absolute;
        left: 9px;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #91a5bf;
      }

      .point {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
      }
    }
  }
}
</style>
